<!-- 供应商---sku销量统计页面 -->
<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small" inline>
          <el-row>
            <!-- 时间选择 -->
            <el-form-item :label="$t('时间选择')">
              <el-date-picker
                @change="getList"
                :clearable="false"
                v-model="queryParams.time"
                type="daterange"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>

            <!-- 库位号 -->
            <el-form-item :label="$t('库位号')" prop="spNo">
              <el-input clearable @keyup.enter.native="handleQuery" v-model="queryParams.spNo" />
            </el-form-item>
            <!-- sku -->
            <el-form-item :label="$t('sku编号')" prop="skuNo">
              <el-input clearable @keyup.enter.native="handleQuery" v-model="queryParams.skuNo" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
    </PageSearch>

    <el-table
      :height="showSearch ? calTableHeight() - 50 : calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId"
    >
      <!-- sku编号 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="skuNo"
        :label="$t('sku编号')"
        :show-overflow-tooltip="true"
        width="106"
        fixed="left"
      >
        <template slot-scope="scope">
          <div @click="handleEdits(scope.row)" style="cursor: pointer; color: #1890ff">
            {{ scope.row.skuNo }}
          </div>
        </template>
      </el-table-column>
      <!-- 库位号 -->
      <el-table-column align="center" auto-fit prop="spNo" :label="$t('库位号')" fixed="left" width="120" />

      <!-- 图片 -->
      <el-table-column align="center"  prop="imgUrl" :label="$t('图片')">
        <template slot-scope="{ row }">
          <el-image
            fit="contain"
            style="width: 50px; height: 50px"
            :key="Math.random()"
            v-hover="row.imgUrl"
            :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" :label="$t('名称')" />
      <!-- 销量 -->
      <el-table-column align="center" show-overflow-tooltip prop="salesVolume" label="销量" />
      <!-- <el-table-column align="center" show-overflow-tooltip prop="salePrice" label="sku营业额" /> -->
      <!-- 库存数量 -->
      <el-table-column align="center" show-overflow-tooltip prop="stock" label="库存数量" />
      <!-- 云库存数量 -->
      <el-table-column align="center" show-overflow-tooltip prop="cloudStock" label="云库存数量" />
      <!-- 采购中数量 -->
      <el-table-column align="center" show-overflow-tooltip prop="purchaseNum" label="采购中数量" />

      <!-- 采购日期 -->
      <el-table-column align="center" show-overflow-tooltip prop="purchaseTime" :label="$t('采购日期')" />
      <el-table-column align="center" label="销量趋势（销量）" width="250">
        <template slot-scope="{ row }">
          <div :id="'main' + row.skuId" style="width: 250px; height: 70px"></div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="getList" ref="Skucontmoduler"></Skucontmoduler>
  </div>
</template>

<script>
import { getSalesVolumeListByDistributor } from '@/api/statistics/skuSaleSupplier'
import Skucontmoduler from '@/components/Skucontmoduler'
import * as echarts from 'echarts'
import useStaticsConfig from '@/utils/useStaticsConfig'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'SkuSaleSupplier',
  components: {
    Skucontmoduler,
  },
  data() {
    return {
      showSearch: true,
      form: {},
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        spNo: '',
        skuNo: '',
        time: [],
      },
    }
  },
  async created() {
    this.queryParams.time = this.setStatisticsDefautTime('day')
    this.getList()
  },

  methods: {
    drawCharts() {
      function draw(id, item) {
        const xData = item?.salesVolumeList.map((i) => i.createTime?.split(' ')[0])
        const yData = item?.salesVolumeList.map((item) => item.saleNum)
        const { tooltip, xAxis, yAxis, grid, series } = useStaticsConfig(xData, yData)
        const option = { tooltip, xAxis, yAxis, grid, series }
        const chartDom = document.getElementById('main' + id)

        let myChart = echarts.getInstanceByDom(chartDom)

        if (myChart == null) {
          myChart = echarts.init(chartDom)
        }
        myChart.setOption(option)
      }

      for (const item of this.tableData) {
        draw(item.skuId, item)
      }
    },
    handleEdits(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformation')
    },
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      getSalesVolumeListByDistributor(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
        this.$nextTick(() => {
          this.drawCharts()
        })
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.spNo = ''
      this.queryParams.skuNo = ''
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.queryParams.time = this.setStatisticsDefautTime('day')

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
